<template>
  <div class="app-container">
    <NavBar title="联系人" back="/addressBook" background="#F4F5F9" />
    <div class="has-nav-bar">
      <div class="user-info-base">
        <img class="user-avatar" :src="constants.getFileView(user.avatar)" data-default="avatar" @error="handleImageError">
        <div class="user-name">
          {{ user.realName }}/{{ user.userName }}
        </div>
        <div class="user-desc">
          <span v-for="item in organizations" :key="item.id" class="item">{{ item.organizationName }}</span>
        </div>
        <div class="user-icon-link">
          <a :href="'tel:'+user.mobile" class="item">
            <svg-icon icon-class="icon-phone" />
          </a>
          <a :href="'sms:'+user.mobile" class="item">
            <svg-icon icon-class="icon-sms" />
          </a>
        </div>
      </div>
      <div class="user-info-detail">
        <van-cell-group>
          <van-cell title="手机号">
            <template>
              {{ user.mobile?user.mobile:'未填写' }}
            </template>
          </van-cell>
          <van-cell title="座机号">
            <template>
              {{ user.phone?user.phone:'未填写' }}
            </template>
          </van-cell>
          <van-cell title="邮箱">
            <template>
              {{ user.email?user.email:'未填写' }}
            </template>
          </van-cell>
          <van-cell title="岗位">
            <template>
              {{ user.mobile?user.mobile:'未填写' }}
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {},
      organizations: [],
      itemRoles: []
    }
  },
  computed: {
  },
  created() {
    this.fetchUserDetails()
  },
  methods: {
    fetchUserDetails() {
      this.$store.dispatch('getUserDetailsById', this.$route.params.id).then(res => {
        this.user = res.user
        this.organizations = res.organizations
        this.itemRoles = res.roles
      }).catch((_) => {})
    }
  }
}
</script>
<style lang="scss" scoped >
  .user-info-base{
    margin-top: 1.875rem;
    text-align: center;
    .user-avatar{
      width: 4.5rem;
      height: 4.5rem;
      border-radius: 4.5rem;
    }
    .user-name{
      color: #000;
      margin-top: .875rem;
    }
    .user-desc{
      color: #9A9DA3;
      font-size: 12px;
      margin-top: .875rem;
      .item{
        margin-right: 5px;
      }
    }
    .user-icon-link{
      margin-top: 1.875rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
      .item{
        margin: 0 1rem;
        .svg-icon{
          width: 2.5rem;
          height: 2.5rem;
          border: 1px solid #000;
          border-radius: 2.5rem;
          padding: 5px;
        }
      }
    }
  }
  .user-info-detail{
    margin-top: 2rem;
    flex: 1;
    background: #fff;
  }
</style>
